<template>
   <ClientOnly>
      <el-dialog class="Announcement-popover" v-model="AnnouncementPopoverShow" width="430px" align-center
         :close-on-press-escape="false" :close-on-click-modal="false" :lock-scroll="false">
         <div class="Abody">
            <div class="header">
               <div>
                  {{ SystemData.SystemAnnounceList[0]?.title }}
               </div>
               <span class="iconfont iconfont2 icon-guanbi5" @click="AnnouncementPopoverShow = false"></span>
            </div>
            <div class="content">
               {{ SystemData.SystemAnnounceList[0]?.content }}
            </div>
            <div class="footer">
               <button v-for="(item, index) in SystemData.SystemAnnounceList[0]?.btn" :key="index" @click="clickAnBtn(item)">
                  {{ item.name }}
               </button>
            </div>
         </div>
      </el-dialog>
   </ClientOnly>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
});

const AnnouncementPopoverShow = ref(false)
// 公告弹出计算函数
async function Ann() {
   // 计算时间，弹出公告
   if (process.client) {
      const An = props.SystemData.SystemAnnounceList[0] // 新公告
      // 读取本地储存 判断是否存在
      const Ans = localStorage.getItem('Ans')
      // 准备数据
      const arr: any = []
      if (Ans && An) {
         const nn: any = JSON.parse(Ans)
         const find = nn.find((v: any) => v.forum === An.forum)
         if (find) {
            // 判断是否是 同一个公告
            if (An.code === find.code) {
               const { value, time, code, forum } = find
               // 计算之前弹窗时间戳 + 间隔时间 = 下一次弹窗时间
               const newTime = time + (value * 60 * 60 * 1000);
               // 判断现在时间戳是否大于 新弹窗时间 ,如果大于，则重新弹出，再更新时间重新写入
               const nowTIME = new Date().getTime()
               if (nowTIME > newTime) {
                  AnnouncementPopoverShow.value = true
                  let index = nn.findIndex((obj: any) => obj.forum === find.forum)
                  nn.splice(index, 1, {
                     forum: find.forum, // 记录是哪个子系统 
                     code: find.code, // code 标识符
                     time: nowTIME, // 记录上一次弹窗时间
                     value: find.value, // 记录多少小时候再次弹窗
                  })
                  localStorage.setItem('Ans', JSON.stringify(nn))
               }
            }
            else {
               // console.log('新公告');
               // 新的公告 直接弹窗，并更新重新写入
               AnnouncementPopoverShow.value = true
               let index = nn.findIndex((obj: any) => obj.forum === find.forum)
               nn.splice(index, 1, {
                  forum: An.forum, // 记录是哪个子系统 
                  code: An.code, // code 标识符
                  time: new Date().getTime(), // 记录上一次弹窗时间
                  value: An.intervalTime, // 记录多少小时候再次弹窗
               })
               localStorage.setItem('Ans', JSON.stringify(nn))
            }
         }
         else {
            // 没有记录过
            AnnouncementPopoverShow.value = true
            // 尝试写入
            nn.push({
               forum: An.forum, // 记录是哪个子系统 
               code: An.code, // code 标识符
               time: new Date().getTime(), // 记录上一次弹窗时间
               value: An.intervalTime, // 记录多少小时候再次弹窗
            })
            localStorage.setItem('Ans', JSON.stringify(nn))
         }
      }
      else {
         setTimeout(() => {
            if (!An) return
            AnnouncementPopoverShow.value = true
            // 尝试写入
            arr.push({
               forum: An.forum, // 记录是哪个子系统 
               code: An.code, // code 标识符
               time: new Date().getTime(), // 记录上一次弹窗时间
               value: An.intervalTime, // 记录多少小时候再次弹窗
            })
            localStorage.setItem('Ans', JSON.stringify(arr))
         }, 200)
      }
   }
}
Ann()
setInterval(async () => await Ann(), 60000) // 每一分钟执行一次 公告弹出计算

// 点击公告按钮
const clickAnBtn = (item: any) => {
   // Announcement
   if (item.path) {
      AnnouncementPopoverShow.value = false
      setTimeout(() => {
         window.open(item.path, '_blank')
      }, 400)
   } else {
      AnnouncementPopoverShow.value = false
      setTimeout(() => {
         // 携带子系统ID 跳转到公告页面，发请求获取公告列表
         window.open('/Announcement?id=' + props.SystemData.SystemInfo.systemSign, '_blank')
      }, 400)
   }
}

</script>
<style lang="scss" scoped>
.Announcement-popover {
   .Abody {
      width: 100%;
      height: 100%;
      padding: 15px;
      background-color: #FFF;
      border-radius: var(--aoir-border-radius);
      display: flex;
      flex-direction: column;
      box-shadow: 0px 0px 40px 0px rgba(181, 181, 181, 0.25);

      .header {
         width: 100%;
         font-size: 18px;
         margin-bottom: 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-weight: 600;

         .iconfont {
            font-size: 24px;
            color: #5e5e5e;
            cursor: pointer;

            &:hover {
               color: #ec4556;
            }
         }
      }

      .content {
         font-size: 16px;
         padding: 15px 0;
      }

      .footer {
         display: flex;
         justify-content: flex-end;
         margin-top: 10px;

         button {
            border: 0;
            padding: 6px 14px;
            background-color: var(--aoir-color-primary);
            color: #FFF;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            box-shadow: 0 0 5px 0 rgba(74, 74, 74, 0.141);
            margin-left: 10px;
            font-size: 14px;
            font-weight: 700;
         }
      }
   }
}
</style>